<template>
  <div class="menuList-wrap">
    <MySearch :options="searchOptions" @getSearchData="getSearchData"></MySearch>
    <MyTable :options="tableOptions"></MyTable>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import MySearch from '@/components/mySearch/MySearch.vue'
import type { SearchOptionType } from '@/components/mySearch/mySearchTypes'
import MyTable from '@/components/myTable/MyTable.vue'
import type { TableOptionType } from '@/components/myTable/myTableTypes'

/** 搜索配置 */
const searchOptions = computed((): SearchOptionType => {
  return {
    list: [
      { type: 'text', name: 'name', title: '姓名' },
      {
        type: 'select',
        name: 'age',
        title: '年龄',
        selectOption: {
          itemList: [
            { title: '11', value: '11' },
            { title: '22', value: '22' }
          ]
        }
      }
    ],
    btns: [{ title: '新增', onClick: menuAdd }]
  }
})
/** 搜索 */
const getSearchData = (data: any) => {}

/** 表格配置 */
const tableOptions = computed((): TableOptionType => {
  return {
    url: '/tools/menu/page',
    columns: [
      { title: '日期', name: 'date' },
      { title: '名字', name: 'name' },
      { title: '状态', name: 'state' },
      { title: '城市', name: 'city' }
    ]
  }
})

/** 菜单新增 */
const menuAdd = () => {
  console.log(11111)
  //
}
</script>

<style lang="less" scoped>
.menuList-wrap {
  height: 100%;
  width: 100%;
}
</style>
